<template>
<div style="background-color: #fcfcfc;padding: 10px 30px 30px 30px; text-align: center">
  <TableMsg ref="tableRoleMsg"
            :insert-button="true"
            :columns="columns"
            @change-msg="getRoleList"
            :request_value="request_value"
            @insert="insertRole"
            @update="updateHandler"
            @delete="deleteHandler"
            @reset="resetHandler"
            @info="infoHandler"
            @success="permissionHandler"
  />
  <ModifyRoleForm ref="modifyRoleForm"/>
  <RoleDetail ref="roleDetail"/>
  <InsertRoleForm ref="insertRoleForm" @insert="getRoleList"/>
  <PermissionRoleForm ref="permissionRoleForm"/>
</div>
</template>

<script>
import { ref } from 'vue'
import TableMsg from '@/components/table/TableMsg'
import { deleteRole, getRoleList, resetRole } from '@/api/role'
import ModifyRoleForm from '@/views/permission/role/form/ModifyRoleForm'
import RoleDetail from '@/views/permission/role/detail/RoleDetail'
import InsertRoleForm from '@/views/permission/role/form/InsertRoleForm'
import PermissionRoleForm from '@/views/permission/role/form/PermissionRoleForm'
export default {
  name: 'RolePermissionViews',
  components: { PermissionRoleForm, InsertRoleForm, RoleDetail, ModifyRoleForm, TableMsg },
  setup () {
    const columns = [
      { prop: 'name', label: '角色名' },
      { prop: 'description', label: '描述' },
      { prop: 'status', label: '状态', type: 'status', status: ['ENABLE', 'DELETED'], tag: [0, 2] },
      { prop: 'option', label: '操作', type: 'option', width: 440, option: { success: { text: '绑定权限' }, info: true, update: true, delete: true, reset: true } }
    ]
    return {
      columns,
      data: ref([{
        name: '',
        description: '',
        status: ''
      }]),
      request_value: ref({})
    }
  },
  methods: {
    getRoleList (val) {
      let page = this.$refs.tableRoleMsg.getPage
      if (val) {
        page = val
      }
      getRoleList(page).then(value => {
        this.request_value = value
      })
    },
    updateHandler (val) {
      this.$refs.modifyRoleForm.data = {}
      this.$refs.modifyRoleForm.dialogVisible = true
      this.$refs.modifyRoleForm.dataOld = val
      this.$refs.modifyRoleForm.getRoleInfo(val.id)
    },
    deleteHandler (val) {
      deleteRole(val).then(value => {
        this.getRoleList()
      })
    },
    resetHandler (val) {
      resetRole(val).then((val) => {
        this.getRoleList()
      })
    },
    infoHandler (val) {
      this.$refs.roleDetail.dialogVisible = true
      this.$refs.roleDetail.data = val
    },
    permissionHandler (val) {
      console.log(val)
      this.$refs.permissionRoleForm.getPermissionByRoleId(val.id)
      this.$refs.permissionRoleForm.dialogVisible = true
    },
    insertRole (role) {
      this.$refs.insertRoleForm.dialogVisible = true
      this.$refs.insertRoleForm.data = {}
      // insertRole(role).then((val) => {
      //   console.log(val)
      // })
    }
  },
  mounted () {
    this.getRoleList()
  }
}
</script>

<style scoped>

</style>
